<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="utf-8" />
	<title>websocket-测试</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

	<style type="text/css">
		html, body {
			text-align: center;
		}

	</style>
	
</head>
<body>
	<div>
		<input id="deviceNoInput">
		<button onclick="sendMsg()">发送数据</button>
	</div>

	<script src="../plugins/jquery/jquery-2.2.3.js"></script>

	<script src="../js/common/commonUtil.js"></script>

	<script type="text/javascript" src="../plugins/mpeg/jsmpeg.min.js"></script>
	<script type="text/javascript">

		/*
		var canvas = document.getElementById('video-canvas');
		var url = 'ws://127.0.0.1:7001/live1';
		var player = new JSMpeg.Player(url, {canvas: canvas});
		*/
		var ws = null

		var videoSocketUrlPrefix = "ws://127.0.0.1:7001/send/";

		function initWebSocket(){
			ws = new WebSocket(videoSocketUrlPrefix + "test-ws-001");

			ws.binaryType = "arraybuffer";

			ws.onopen = function(){
				//当WebSocket创建成功时，触发onopen事件
				console.log("open");
			}

			ws.onmessage = function(event){
				if(typeof event.data === String) {
					console.log("Received data string");
				}else{
					console.log("message_type : " + (event.data instanceof ArrayBuffer));

					var buffer = event.data;

					var msgTxt = Bytes2Str(buffer);

					console.log("Received arraybuffer | " + msgTxt);
				}
			}
			ws.onclose = function(e){
				//当客户端收到服务端发送的关闭连接请求时，触发onclose事件
				console.log("close");
			}
			ws.onerror = function(e){
				//如果出现连接、处理、接收、发送数据失败的时候触发onerror事件
				console.log(error);
			}
		}

		function sendMsg(){
			var deviceNo = $("#deviceNoInput").val();
			console.log(deviceNo);

			var msgBuffer = ToUTF8(deviceNo);
			ws.send(msgBuffer); //将消息发送到服务端
		}

		$(document).ready(function(){

			initWebSocket();

		});

	</script>
</body>
</html>